<template>
  <div class="left-chart-3">
    <div class="lc3-header">租房热点小区统计</div>
    <dv-capsule-chart class="lc3-chart" :config="config" />
  </div>
</template>

<script>
  export default {
    name: 'LeftChart3',
    data () {
      return {
        config: {
          data: [
            {
              name: '四季金辉',
              value: 78
            },
            {
              name: '金色梦想',
              value: 54
            },
            {
              name: '宝带小区',
              value: 123
            },
            {
              name: '四季园小区',
              value: 167
            },
            {
              name: '兰苑小区',
              value: 77
            }
          ],
          colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
          unit: '套'
        }
      }
    }
  }
</script>

<style lang="less">
  .left-chart-3 {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;

    .lc3-header {
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 22px;
      font-weight: bold;
      text-indent: 20px;
      margin: 10px 0;
    }

    .lc3-chart {
      flex: 1;
    }

    .dv-capsule-chart .label-column {
      font-size: 15px;
    }
    .dv-capsule-chart .unit-label {
      font-size: 15px;
    }
  }
</style>
